
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<link href="../static/manage/css/style.css" rel="stylesheet" type="text/css" />
	<!-- <link href="../manage/static/css/style.css" rel="stylesheet" type="text/css" /> -->
	<!-- <script src="../static/manage/js/login.js"></script> -->
<!-- <script type="text/javascript" src="js/jquery.min.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
	<script src="../static/js/componentjs/common.js"></script>
	
	<!--引入 element-ui 的样式，-->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入element 的组件库-->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>
<!--

* 17素材vip建站专区模块代码
* 详尽信息请看官网：http://www.17sucai.com/pins/vip
*
* Copyright , 温州易站网络科技有限公司版权所有
*
* 请尊重原创，未经允许请勿转载。
* 在保留版权的前提下可应用于个人或商业用途

-->
<div id="app">
<div class="aui-register-popup">
	<div class="aui-register-box">
		<div class="aui-register-link">
			<a href="../webContent/index.html" class="fl">返回首页</a>
			<a href="javascript:;" class="fr">已有账号？去登录</a>
		</div>
		<div class="aui-register-logo">
			<!-- <img src="../manage/static/images/logo.png" alt=""> -->
		</div>
		<div class="aui-register-form" id="verifyCheck">
			<div class="register-wrap" id="register-wrap">
				<div class="register" id="register">
					<div class="register-top" id="reg-top">
						<h2 class="normal" id="normal" @click="changePassLogin">普通登录</h2>
						<h2 class="nopassword" id="nopw" @click="changeTelLogin">手机无密码登录</h2>
						<a id="qrcode" href="#">
							<span class="aui-tag-size">扫码登录</span>
						</a>
					</div>
                    
					<!--账户密码登录-->
					<div class="register-con" id="rc">
                        <!--账户密码登录-->
                        <template v-if="showPassLogin">
						<div class="aui-register-form-item">
							<input
                                   v-model="Manager.managerName"
                                   type="text" name="username" maxlength="20"  placeholder="账户名" class="txt03 f-r3 required" tabindex="3" data-valid="isNonEmpty||between:3-20||isUname" data-error="<i class='icon-tips'></i>您还没有输入账户名||<i class='icon-tips'></i>用户名长度3-20位||<i class='icon-tips'></i>只能输入字母、数字、且以中文或字母开头" id="adminNo">
                            <p style="color: red">{{message}}</p>
							<label class="focus valid"></label>
						</div>
						<div class="aui-register-form-item">
							<input 
                                   v-model="Manager.managerPass"
                                   type="password" name="password" placeholder="密码" id="password" maxlength="20" class="txt04 f-r3 required" tabindex="4" style="ime-mode:disabled;" onpaste="return  false" autocomplete="off" data-valid="isNonEmpty||between:6-20||level:2" data-error="<i class='icon-tips'></i>密码太短，最少6位||<i class='icon-tips'></i>密码长度6-20位||<i class='icon-tips'></i>密码太简单，有被盗风险，建议字母+数字的组合">
							<label class="focus valid"></label>

						</div>
						<div class="aui-register-form-item">
							<p class="aui-for-pwd">
								<a class="" href="#">忘记密码</a>
							</p>
							<input id="aui-btn-reg" class="aui-btn-reg" placeholder=""  readonly="readonly" 
                                   type="button"
                                   @click="login()" value="登录" >
						</div>
						<div class="aui-protocol">
							登录即同意
							<a  href="#">《后浪高考网使用协议》</a>&
							<a  href="#">《隐私权条款》</a>
						</div>
<!--
						<div class="aui-thirds">
							<a href="#">
								<i class="aui-qq-img"></i>
								<i>QQ登录</i>
							</a>
							<a h阿里云短信签名审核不通过ref="#">
								<i class="aui-wx-img"></i>
								<i>微信登录</i>
							</a>
							<a href="#">
								<i class="aui-wb-img"></i>
								<i>微博登录</i>
							</a>
							<div class="clear"></div>
						</div>
-->
                             </template>
                        <!--手机动态码登录-->
                        <template v-if="showTelLogin">
						<div class="aui-register-form-item">
							<input
									v-model="phone"
									
									type="text" name="phone" placeholder="手机号码" class="txt01 f-r3 required" keycodes="tel" tabindex="1" data-valid="isNonEmpty||isPhone" data-error="<i class='icon-tips'></i>请输入手机号||<i class='icon-tips'></i>手机号码格式不正确" maxlength="11" id="phone">
							<label class="focus valid"><div class="msg" style="display:none"><i class='icon-tips'></i>您还未输入手机号</div></label>
							<span class="aui-get-code btn btn-gray f-r3 f-ml5 f-size13" id="time_box" disabled style="display:none;" v-show="!isShow">{{time}}</span>
							<span class="aui-get-code btn btn-gray f-r3 f-ml5 f-size13" id="verifyYz" v-show="isShow" @click="sendCode"  >获取动态码</span>
						</div>
						<div class="aui-register-form-item">
							<input type="text" placeholder="动态码" v-model="loginCode"  maxlength="6" id="verifyNo" class="txt02 f-r3 f-fl required" tabindex="2" data-valid="isNonEmpty||isInt" data-error="<i class='icon-tips'></i>请填写正确的手机动态码||<i class='icon-tips'></i>请填写6位手机动态码">
							<label class="focus valid"></label>
							<p style="color: red">{{message}}</p>
						</div>
						<div class="aui-register-form-item">
							<input id="aui-btn-reg1" class="aui-btn-reg" placeholder=""  readonly="readonly" value="登录" @click="telLogin">
						</div>
						<div class="aui-protocol">
							登录即同意
							<a  href="#">《后浪高考网使用协议》</a>&
							<a  href="#">《隐私权条款》</a>
						</div>
<!--
						<div class="aui-thirds">
							<a href="#">
								<i class="aui-qq-img"></i>
								<i>QQ登录</i>
							</a>
							<a href="#">
								<i class="aui-wx-img"></i>
								<i>微信登录</i>
							</a>
							<a href="#">
								<i class="aui-wb-img"></i>
								<i>微博登录</i>
							</a>
							<div class="clear"></div>
						</div>
-->
                            </template>

					</div>
                       
                    
					<!--手机动态码登录-->
<!--
					<div class="login-con" id="lc">
                        
                        
					</div>
-->
                    

					<!-- 扫码登录 -->
<!--
					<div class="saoma" id="sm">
						<div class="screen-tu" id="screen">
							<span class="aui-tag-size">密码登录</span>
						</div>
						<div class="aui-text-item">
							<h1>1秒即登录，方便又安全</h1>
						</div>
						<div class="qr-code">
							<span class="tips_img"></span>
							<img src="images/code.png" alt="">
						</div>
						<div class="aui-tab-footer">
							<p>17扫码登录，同步账户信息 | <a href="#">下载17APP</a></p>
						</div>

					</div>
-->
				</div>
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="aui-register-bottom">
			<a>©188.com</a>
			<a href="#">联系客服</a>
			<a href="#">帮助中心</a>
			<div class="clear"></div>
		</div>
	</div>
</div>
</div>


<!-- <script type="text/javascript">
$(function() {
	$("#aui-btn-reg").click(function() {
		if (!verifyCheck._click()) return;
		alert('恭喜你！登录成功')

	});
	$("#aui-btn-reg1").click(function() {
		if (!verifyCheck._click()) return;
		alert('恭喜你！登录成功')

	});
});
</script> -->

     <script>
    var path="http://localhost:8080/";
var app = new Vue({
    el:"#app",
    data:{
        Manager:{},
        message:'',
        showPassLogin: true,
        showTelLogin: false,
		isShow: true,
		time: 60,
		phone: '',
		loginCode:''
    },
    methods:{
        login:function(){
            axios.post(path+"/manage/login",this.Manager)
            .then(res=>{
                if(res.data.success){
                    this.message='';
                    var token = res.data.data.token;
					var managerName=res.data.data.manager.managerName;
                    //登录成功之后保存token
                    window.localStorage.setItem("token",token);
					//保存用户信息
					window.localStorage.setItem("managerName",managerName);
					initToken();
                    //从哪个页面跳到登录的，登录成功后就回到哪个页面
                    var search = window.location.search;//?url=...
                    if(search){
                        var url = search.slice(5);
                        window.location.href=url;
                    }
                    else{
                        //如果直接请求的登录页面，登录成功后回到首页
                        window.location.href="index.html";    
                    }
                    
                }
                else{

                    this.message="用户名或者密码错误，请重新登录";
                }
            });
        },
		//访问手机号登录接口
		telLogin: function(){
			var dto={
				telPhone: this.phone,
				loginCode: this.loginCode
			}
			axios.post(path+"manage/telLogin",dto)
			.then(res=>{
				console.log(res.data)
				if(res.data.success){
					console.log("成功");
					window.location.href="index.html";  
					 
					this.message='';
					var token = res.data.token;
					var managerName = res.data.data.managerName;
					//登录成功之后保存token
					window.localStorage.setItem("token",token);
					//保存用户名
					window.localStorage.setItem("managerName",managerName);
					//从哪个页面跳到登录的，登录成功后就回到哪个页面
					var search = window.location.search;//?url=...
					if(search){
					    var url = search.slice(5);
					    window.location.href=url;
					}
					else{
					    //如果直接请求的登录页面，登录成功后回到首页
					    window.location.href="index.html";    
					}
				}
				else{
					this.message=res.data.message;
				}
			});
		},
		//更改密码登录页的显示
        changePassLogin: function(){
            this.showPassLogin=true;
            this.showTelLogin=false;
        },
		//更改手机号验证登录的页面
        changeTelLogin: function(){
            this.showPassLogin=false;
            this.showTelLogin=true;
        },
		//获取登录验证码
		sendCode: function() {
		            if(this.phone === '' || this.phone.length < 11){
		                return alert('请输入合法的手机号')
		            }
		            // let params = new URLSearchParams()
		            // params.append("phone",this.phone)
		            // params.append("type",1)
		            axios.post(path+"createCode/"+this.phone)
		                .then(res => {
							console.log(res.data)
		                    if(res.data.success) {
								
								var token = res.data.data.token;
								//保存token
								window.localStorage.setItem("token",token);
								initToken();
		                        this.isShow = false;
		    
		                        let auth_timer = setInterval(()=>{  //定时器设置每秒递减
		                          this.time--;        //递减时间
		                          if(this.time<=0){
		　　　　　　　　　　　　　　　　  this.time =60;
		                            this.isShow = true;    //60s时间结束还原v-show状态并清除定时器
		                            clearInterval(auth_timer);
		                          }
		                        },1000)
		
		                        alert('验证码已发送,请注意查收')
		                    } else {
		                        alert(res.data.message)
		                    }
		                })
		        }
    }
    
});
</script>
    

</body>
</html>
